<template>
	<view class="page-publish">
		<!-- 自定义导航 -->
		<cl-topbar title="发布新动态">
			<template slot="append">
				<view class="btn">
					<cl-button type="primary" round :loading="loading" @click="submit">发布</cl-button>
				</view>
			</template>
		</cl-topbar>

		<view class="container">
			<cl-form ref="form" :model="form" :rules="rules" label-position="top" :show-message="false">
				<!-- 文本域 -->
				<cl-form-item>
					<cl-textarea height="280rpx" v-model="form.content" placeholder="把自己的想说的话告诉陌生人吧"></cl-textarea>
				</cl-form-item>

				<!-- 图片上传 -->
				<cl-form-item>
					<cl-upload v-model="form.urls" ref="upload" multiple :limit="9" :auto-upload="false"
						@custom-upload="onUpload($event)"></cl-upload>
				</cl-form-item>

				<cl-form-item>
					<cl-list>
						<cl-list-item label="添加话题">
							<image slot="icon" :src="require('@/static/icon/add.png')" alt />

							<template slot="append">
								<cl-text :size="24" value="选择合适的话题会有更多赞哦" color="#A8A8A8"></cl-text>
								<cl-icon name="cl-icon-arrow-right" color="#282828" size="20"></cl-icon>
							</template>
						</cl-list-item>
						<cl-list-item label="添加位置">
							<image slot="icon" :src="require('@/static/icon/location.png')" alt />

							<template slot="append">
								<cl-text :size="24" value="可以推荐给你附近的好友哦" color="#A8A8A8"></cl-text>
								<cl-icon name="cl-icon-arrow-right" color="#282828" size="20"></cl-icon>
							</template>
						</cl-list-item>
					</cl-list>
				</cl-form-item>

				<cl-form-item>
					<view class="group">
						<cl-select v-model="form.isopen" :options="opens"></cl-select>

						<view class="save">
							<cl-text :size="24" value="保存到相册" color="#6D6D6D"></cl-text>
							<cl-checkbox round v-model="form.issave"></cl-checkbox>
						</view>
					</view>
				</cl-form-item>
			</cl-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				type: 0,
				form: {
					content: "",
					urls: [],
					qiniuImageKey[]
				},
				rules: {
					content: {
						required: true,
						message: "内容不能为空"
					}
				}
			}
		},
		methods: {
			async submit() {
				// 模拟加载
				this.loading = true;

				if (this.form.urls.length != 0) {
					this.type = 1;
					//上传图片
					for (var i = 0; i < this.form.urls.length; i++) {
						let option = {
							filePath: this.form.urls[i],
							name: "file"
						}
						let [err, res] = await this.$http.upload("dynamic/file/upload", option, {
							checkToken: true
						});
						if (!this.$http.errorCheck(err, res)) {
							return;
						}

						let resJson = JSON.parse(res.data)
						this.form.qiniuImageKey.push(resJson.data.path);
					}

					//获取token
					let [err, res] = await this.$http.get("dynamic/publish/qiniu/token");
					if (!this.$http.errorCheck(err, res)) {
						return;
					}
					let token = res.data.data.token;
					var that = this;

					for (var i = 0; i < this.form.urls.length; i++) {
						// 	//上传到七牛云
						await uni.uploadFile({
							url: 'https://portal.qiniu.com/kodo/bucket/overview?bucketName=blog-project-image-qf', //仅为示例，非真实的接口地址
							filePath: this.form.urls[i],
							name: 'file',
							formData: {
								token: token
							},
						}).then(
							(uploadFileRes) => {
								let jsonObj = JSON.parse(uploadFileRes[1].data);
								that.form.qiniuImageKey.push(jsonObj.key);
							}
						)
					}
				}

				let param = {
					type: this.type,
					text: this.form.content,
					image: this.form.qiniuImageKey.toString(),
					tag_id: 0
				}

				//发布文章
				let [err, res] = await this.$http.post("dynamic/article/publish", param, {
					// checkToken: true
				});
				if (!this.$http.errorCheck(err, res)) {
					uni.hideLoading();
					this.loading = false;
					if (res.data.errno == 10000) {
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/vip/vip'
							})
						}, 1000);
					}
					return;
				}

				uni.hideLoading();
				uni.showToast({
					title: '发布成功'
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/index/dynamic'
					});
				}, 1000);

				this.loading = false;
			},
			onUpload(file) {
				this.form.urls.push(file.path);
				this.$refs["upload"].loading = false;
			}
		}
	};
</script>

// <script>
	// 	export default {
	// 		data() {
	// 			return {
	// 				loading: false,
	// 				type: 0,
	// 				form: {
	// 					content: "",
	// 					urls: [],
	// 					qiniuImageKey: [],
	// 				},
	// 				rules: {
	// 					content: {
	// 						required: true,
	// 						message: "内容不能为空"
	// 					}
	// 				}
	// 			};
	// 		},
	// 		methods: {
	// 			async submit() {
	// 				// 模拟加载
	// 				this.loading = true;

	// 				if (this.form.urls.length != 0) {
	// 					this.type = 1;
	// 					//上传图片
	// 					for (var i = 0; i < this.form.urls.length; i++) {
	// 						let option = {
	// 							filePath: this.form.urls[i],
	// 							name: "file"
	// 						}
	// 						let [err, res] = await this.$http.upload("file/upload", option, {
	// 							checkToken: true
	// 						});
	// 						if (!this.$http.errorCheck(err, res)) {
	// 							return;
	// 						}

	// 						let resJson = JSON.parse(res.data)
	// 						this.form.qiniuImageKey.push(resJson.data.path);
	// 					}

	// 					//获取token
	// 					// let [err, res] = await this.$http.get("qiniu/token");
	// 					// if(!this.$http.errorCheck(err,res)){
	// 					// 	return;
	// 					// }
	// 					// let token = res.data.data.token;
	// 					// var that = this;

	// 					// for(var i = 0; i < this.form.urls.length; i++){
	// 					// 	//上传到七牛云
	// 					// 	await uni.uploadFile({
	// 					// 		url: 'http://up-z2.qiniup.com', //仅为示例，非真实的接口地址
	// 					// 		filePath: this.form.urls[i],
	// 					// 		name: 'file',
	// 					// 		formData: {
	// 					// 			token: token
	// 					// 		},
	// 					// 	}).then(
	// 					// 		(uploadFileRes) =>{
	// 					// 			let jsonObj = JSON.parse(uploadFileRes[1].data);
	// 					// 			that.form.qiniuImageKey.push(jsonObj.key);
	// 					// 		}
	// 					// 	)
	// 					// }
	// 				}

	// 				let param = {
	// 					type: this.type,
	// 					text: this.form.content,
	// 					image: this.form.qiniuImageKey.toString(),
	// 					tag_id: 0
	// 				}

	// 				//发布文章
	// 				let [err, res] = await this.$http.post("dynamic/article/publish", param, {
	// 					// checkToken: true
	// 				});
	// 				if (!this.$http.errorCheck(err, res)) {
	// 					uni.hideLoading();
	// 					this.loading = false;
	// 					if (res.data.errno == 10000) {
	// 						setTimeout(function() {
	// 							uni.navigateTo({
	// 								url: '/pages/vip/vip'
	// 							})
	// 						}, 1000);
	// 					}
	// 					return;
	// 				}

	// 				uni.hideLoading();
	// 				uni.showToast({
	// 					title: '发布成功'
	// 				});
	// 				setTimeout(function() {
	// 					uni.switchTab({
	// 						url: '/pages/index/dynamic'
	// 					});
	// 				}, 1000);

	// 				this.loading = false;
	// 			},
	// 			onUpload(file) {
	// 				this.form.urls.push(file.path);
	// 				this.$refs["upload"].loading = false;
	// 			}
	// 		}
	// 	};
	// 
</script>

<style lang="scss">
	.page-publish {
		.btn {
			.cl-button {
				background-color: #28b5b5;
				width: 120rpx;
				height: 62rpx;
				margin-right: 14rpx;
			}
		}

		.container {
			padding: 32rpx;

			/deep/.cl-form .cl-form-item__container:first-child {
				padding-left: 0;
			}

			/deep/.cl-upload {
				background-color: #efefef;
			}

			.cl-textarea {
				border: none;

				.uni-textarea-placeholder {
					color: #d6d6d6;
				}
			}

			.cl-list {
				width: 100%;
			}

			.group {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cl-select,
				cl-select {
					width: 128rpx;
					height: 56rpx;
					border-radius: 29rpx;
					background-color: #f5f7fa;

					/deep/.cl-select__inner {
						width: 128rpx;
						height: 56rpx;
						display: flex;
						align-items: center;

						.cl-select__icon {
							height: 56rpx;
							display: flex;
							align-items: center;
							position: relative;
							right: 30rpx;
						}
					}

					/deep/.cl-select__value {
						color: #6d6d6d;
						font-size: 24rpx;
					}
				}

				.save {
					background-color: #f5f7fa;
					width: 202rpx;
					height: 56rpx;
					border-radius: 29rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					/deep/.cl-checkbox.is-checked .cl-checkbox__input {
						background-color: #6d6d6d;
						border-color: #6d6d6d;
						color: #fff;
					}

					/deep/.cl-checkbox__input text {
						top: -9rpx;
					}

					/deep/.cl-checkbox__input {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;

						uni-text {
							top: -10rpx;
						}
					}
				}
			}
		}
	}
</style>